
<template>
  <div class="field-control field-control-state">
		<RadioGroup v-if="!searchMode || !selectMode"
                :data="rangeData"
                :disabled="disabled"
                :value="value"
                :hasAll="hasAll"
                @input="valueInput">
    </RadioGroup>
    <SelectControl v-else
                   :data="rangeData"
                   :value="value"
                   :clearable="true"
                   placeholder="全部"
                   @input="valueInput"></SelectControl>
    <div class="field-message"
         v-show="!validate">{{message}}</div>
  </div>
</template>
<script>
import $ from '@/common';
import base from './base';
import RadioGroup from '@/element/radioGroup';
import SelectControl from '@/element/select/index';
import Field from '../type';
export default {
	extends: base,
	data() {
		return {
			hasAll: false,
			selectMode: false,
		};
	},
	computed: {
		rangeMap() {
			return Field.state.parseRangeset(this.model);
		},
		//保持定义顺序
		rangeData() {
			var data = [];
			var list = Field.state.parseRangesetList(this.model);
			if (!list.length) {
				list = [];
				for (let i in this.rangeList) {
					list.push(i);
				}
			}
			for (let i of list) {
				data.push({
					id: i,
					name: this.rangeMap[i],
				});
      }
			return data;
		},
	},
	mounted() {
		//实验特性 搜索模式下判断stat选项高度，将其转化为select
		if (this.searchMode && $.dev) {
			this.$nextTick(() => {
				var lineHeight = getComputedStyle(this.$el).lineHeight;
				if (lineHeight) {
					lineHeight = parseInt(lineHeight.replace('px'));
					if (this.$el.offsetHeight > lineHeight * 2) {
						this.selectMode = true;
					}
				}
			});
		}
	},
	components: {
		RadioGroup,
		SelectControl,
	},
};
</script>
<style lang="less">
.field-control .ivu-radio-group {
	line-height: 32px;
	margin-bottom: -1px;
	min-height: 32px;
}
.field-control-state .bk-select-m {
	.bk-select-input,
	.bk-select-placeholder,
	.bk-select-selected-value {
		height: 26px;
		line-height: 26px;
	}
}
</style>
